<template>
    <div class="add">
        <p class="title">修改客户</p>
        <div class="tab">
            <div class="left">
                <p class="a">基础信息</p>
                <el-form ref="ruleFormRef" label-width="100px" :model="ruleForm" :rules="rules" status-icon>
                    <el-form-item label="客户名称" prop="name">
                        <el-input v-model="ruleForm.name" />
                    </el-form-item>
                    <el-form-item label="助记名称" prop="label">
                        <el-input v-model="ruleForm.label" />
                    </el-form-item>
                    <el-form-item label="所属行业" prop="label">
                        <el-input v-model="ruleForm.label" />
                    </el-form-item>
                    <el-form-item label="客户类型" prop="type">
                        <el-radio-group v-model="ruleForm.type">
                            <el-radio label="企业客户" />
                            <el-radio label="个人客户" />
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="客户状态" prop="status">
                        <el-select v-model="ruleForm.status">
                            <el-option label="正在跟进" value="正在跟进" />
                            <el-option label="已跟进" value="已跟进" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="客户星级" prop="star">
                        <el-rate v-model="ruleForm.star" />
                    </el-form-item>
                    <el-form-item label="客户来源" prop="label">
                        <el-input v-model="ruleForm.label" />
                    </el-form-item>
                    <el-form-item label="归属人员" prop="label">
                        <el-input v-model="ruleForm.label" />
                    </el-form-item>
                </el-form>
            </div>
            <div class="right">
                <p class="a">首要联系人</p>
                <el-form ref="ruleFormRef" label-width="100px" :model="ruleForm" :rules="rules" status-icon>
                    <el-form-item label="联系人姓名" prop="firstname">
                        <el-input v-model="ruleForm.firstname" />
                    </el-form-item>
                    <el-form-item label="尊称" prop="resource">
                        <el-radio-group v-model="ruleForm.phon">
                            <el-radio label="未知" />
                            <el-radio label="先生" />
                            <el-radio label="女士" />
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="角色" prop="region">
                        <el-select v-model="ruleForm.phon">
                            <el-option label="父亲" value="父亲" />
                            <el-option label="母亲" value="母亲" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="生日">
                        <el-date-picker v-model="ruleForm.date" type="date" clearable />
                    </el-form-item>
                    <el-form-item label="部门职务" prop="phon">
                        <el-input v-model="ruleForm.phon" />
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phone">
                        <el-input v-model="ruleForm.phone" />
                    </el-form-item>
                    <el-form-item label="固定电话" prop="phon">
                        <el-input v-model="ruleForm.phon" />
                    </el-form-item>
                    <el-form-item label="传真号码" prop="phon">
                        <el-input v-model="ruleForm.phon" />
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="bottom">
            <el-button type="primary" :icon="CircleCheck" @click="upd">修改客户</el-button>
            <el-button type="primary" :icon="CircleCheck">保存后修改</el-button>
            <el-button :icon="RefreshRight" @click="reset">重置</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { FormInstance, FormRules } from 'element-plus'
import { CircleCheck, RefreshRight } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// import { updCustom } from '../../../api/custom.ts'
const route = useRoute()
const router = useRouter()
const id = ref()
onMounted(() => {
    id.value = route.query.id
    ruleForm = route.query
})
interface RuleForm {
    name: string
    region?: string
    resource?: string
    type?: string
    status: string
    star: string
    label?: string
    firstname: string
    phon?: string
    date?: string
    phone: string
}
const ruleFormRef = ref<FormInstance>()
let ruleForm = reactive<RuleForm>({
    name: '',
    region: '',
    resource: '',
    type: '',
    status: '',
    star: '',
    label: '',
    firstname: '',
    phon: '',
    date: '',
    phone: ''
})

const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' },
        { min: 2, max: 15, message: '请输入2-15个字符', trigger: 'blur' },
    ],
    status: [
        { required: true, message: '请输入状态', trigger: 'blur' }
    ],
    star: [
        { required: true, message: '请输入星级', trigger: 'blur' }
    ],
    firstname: [
        { required: true, message: '请输入联系人', trigger: 'blur' },
        { min: 2, max: 5, message: '请输入2-5个字符', trigger: 'blur' },
    ],
    phone: [
        { required: true, message: '请输入手机号码', trigger: 'blur' }
    ],
})

const upd = async () => {
    ElMessageBox.confirm(
        '确定修改该用户吗？',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let res = await updCustom({ id: id.value, ...ruleForm })
            console.log(res);
            router.push('/home/custom/customTodo')
            ElMessage({
                type: 'success',
                message: '修改成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消修改',
            })
        })

}
const reset = () => {

}
</script>

<style scoped>
.title {
    padding: 15px;
    border-bottom: 1px solid #ccc;
}

.a {
    margin-bottom: 30px;
}

.add {
    background-color: #fff;
    padding: 10px;
}

.tab {
    display: flex;
}

.left,
.right {
    width: 50%;
    padding: 10px 20px;
}

.bottom {
    display: flex;
    width: 600px;
    justify-content: space-evenly;
    margin: 10px 60px 20px;
}
</style>